<template>
    <div class="modelser-info2">
        <div class="modelser-info-content">
            <div class="info-server">
                <div class="item1">
                    <div class="key">服务地址:</div>
                    <div class="switch">
                        <el-input type="text" v-model.lazy="url" @blur="terrainRtsUrlRef = url"
                            @keydown.enter="terrainRtsUrlRef = url" />
                        <div class="list-img choose" @click="switchTerrainRts = true" title="选择"></div>
                    </div>
                </div>
                <div class="item-content">
                    <div class="item1">
                        <div>显示:</div>
                        <div>
                            <el-switch v-model="showRef" size="small" />
                        </div>
                    </div>
                    <div class="item1">
                        <div>地形调试:</div>
                        <div>
                            <el-switch v-model="showCesiumInspector" size="small" />
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const terrainrtsManager = objm.terrainrtsManager
// 地形调试
const showCesiumInspector = toVR<boolean>(d, [objm, 'showCesiumInspector'])

// 服务地址
const terrainRtsUrlRef = toVR<string>(d, [terrainrtsManager, "terrainRtsUrl"]);
const url = ref(terrainRtsUrlRef.value);
watch(terrainRtsUrlRef, (val) => {
    url.value = val;
})

const switchTerrainRts = toVR(d, [terrainrtsManager.switchTerrainRts, "show"]);
// 显示
const showRef = ref(true)
watch(showRef, (val) => {
    terrainrtsManager.eSRTSTerrainLayer && (terrainrtsManager.eSRTSTerrainLayer.show = val)
})

</script>

<style scoped>
.modelser-info2 {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.modelser-info-header {
    height: 40px;
    width: 100%;
    background: #F0F0F0;
    border-radius: 4px;
    display: flex;
}

.modelser-info-content {
    height: calc(100% - 55px);
    width: 100%;
    /* background-color: #d2d8f4; */
}

.info-item {
    height: 100%;
    text-align: center;
    line-height: 40px;
    width: 33%;
    border-radius: 4px;
    cursor: pointer;
}


.info-actived {
    color: #fff;
    background-color: #537cfe;
}

.none {
    pointer-events: none;

}

.item1 {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
}

.url {
    /* margin-right: 10px; */
    word-break: break-all;
}

.data-btn {
    display: flex;
    gap: 15px;
}

.el-button {
    margin-left: 0 !important;
}

.boundary {
    display: flex;
    flex-direction: column;
}

.boundary-item {
    margin-bottom: 5px;
}

.item-content {
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.cut-box {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.range-slider {
    width: 220px !important;

}

.statistics {
    display: flex;
    justify-content: space-between;
}

.statistics-item {
    margin-bottom: 3px;
}

.info-server,
.info-data,
.info-scope,
.info-debug {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-debug {
    gap: 5px;

}


.data-url {
    display: flex;
}

.el-button,
.el-button.is-round {
    padding: 5px;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
}

.switch {
    display: grid;
    grid-template-columns: 1fr 25px;
    gap: 5px;
    align-items: center;
}
.item-content {
    height: 30px;
    display: flex;
    justify-content: space-between;
}
</style>